<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .pAll {
        font-family: "黑体";
        margin: 50px auto;
      }
      #titles {
        font-weight: bold;
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        background: #fff9f3;
        text-align: center;
        border: 1px solid #ccc;
      }
      #contents {
        margin-top: 20px;
        background: #fff9f3;
        border: 1px solid #ccc;
      }
      #form-itemGroup {
        padding: 10px;
      }
      #form-itemGroup label {
        display: inline-block;
        width: 100px;
        height: 32px;
        line-height: 32px;
        color: #666;
        text-align: right;
      }
      #form-itemGroup .userName {
        width: 200px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;
      }
      #form-itemGroup .default {
        width: 200px;
        height: 32px;
        line-height: 32px;
        color: #999;
      }
      #form-itemGroup .error {
        height: 32px;
        line-height: 32px;
        color: #f00;
      }
      #form-itemGroup input.error {
        outline-color: #f00;
        border-color: #f00;
      }
      #form-itemGroup .success {
        height: 32px;
        line-height: 32px;
        color: #096;
      }
      #form-itemGroup input.success {
        outline-color: #096;
        border-color: #096;
      }
      .pBtn {
        margin-top: 20px;
        margin-left: 200px;
        width: 100px;
        height: 32px;
        line-height: 32px;
        background-color: #f93;
        margin-bottom: 10px;
        color: #ffffff;
        font-weight: bold;
        border: none;
      }
      form {
        margin-left: 500px;
      }
    </style>
  </head>
  <body>
    <div class="pAll">
      <div id="titles">新用户注册</div>
      <div id="contents">
        <form action="#" onSubmit="">
          <p id="form-itemGroup">
            <label for="userName">用户名：</label>
            <input type="text" id="userName" class="userName" />
            <span class="default" id="nameErr">请输入真实姓名</span>
          </p>
          <p id="form-itemGroup">
            <label for="userPasword">密码：</label>
            <input type="password" id="userPasword" class="userName" />
            <span class="default" id="passwordErr"
              >6到20个字符，至少包含一位数字，一个大写字母，一个小写字母和一个特殊符号（@＃$％）</span
            >
          </p>
          <p id="form-itemGroup">
            <label for="userConfirmPasword">确认密码：</label>
            <input type="password" id="userConfirmPasword" class="userName" />
            <span class="default" id="conPasswordErr"
              >请再输入一遍密码, 必须和原密码保持一致</span
            >
          </p>
          <p id="form-itemGroup">
            <label for="userPhone">手机号码：</label>
            <input type="text" id="userPhone" class="userName" />
            <span class="default" id="phoneErr">请输入11位手机号码</span>
          </p>
          <p>
            <button type="submit" class="pBtn">注册</button>
          </p>
        </form>
      </div>
    </div>
    <script>
      window.onload = function () {
        var btn = document.querySelector("button");
        var allInput = document.querySelectorAll("input");
        var allP = document.querySelectorAll("#form-itemGroup");
        for (let i = 0; i < allInput.length; i++) {
          allInput[i].onblur = function () {
            if (this.value == "") {
              this.className = "userName error";
              this.nextElementSibling.innerHTML = "此项必填！";
              this.nextElementSibling.className = "default error";
            } else {
              switch (i) {
                case 0:
                  var reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
                  if (reg.test(this.value)) {
                    this.className = "userName success";
                    this.nextElementSibling.className = "default success";
                    this.nextElementSibling.innerHTML = "姓名格式正确！";
                  } else {
                    this.className = "userName error";
                    this.nextElementSibling.innerHTML = "姓名格式不正确！";
                    this.nextElementSibling.className = "default error";
                  }
                  break;

                case 1:
                var reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
                  if (reg.test(this.value)) {
                    this.className = "userName success";
                    this.nextElementSibling.className = "default success";
                    this.nextElementSibling.innerHTML = "密码格式正确！";
                  } else {
                    this.className = "userName error";
                    this.nextElementSibling.innerHTML = "密码格式不正确，至少6位数，至少一个大写字母，一个小写字母，一个数字，一个特殊字符！";
                    this.nextElementSibling.className = "default error";
                  }
                  break;

                case 2:
                  if (allInput[1].value==allInput[2].value) {
                    this.className = "userName success";
                    this.nextElementSibling.className = "default success";
                    this.nextElementSibling.innerHTML = "密码一致！";
                  } else {
                    this.className = "userName error";
                    this.nextElementSibling.innerHTML = "密码不一致，请重输！";
                    this.nextElementSibling.className = "default error";
                  }
                  break;

                case 3:
                var reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
                  if (reg.test(this.value)) {
                    this.className = "userName success";
                    this.nextElementSibling.className = "default success";
                    this.nextElementSibling.innerHTML = "手机号码格式正确！";
                  } else {
                    this.className = "userName error";
                    this.nextElementSibling.innerHTML = "手机号码格式不正确！";
                    this.nextElementSibling.className = "default error";
                  }
                  break;

                default:
                  break;
              }
            }
          };
        }
        //注册按钮
        btn.onclick = function () {
          for (let i = 0; i < allInput.length; i++) {
            if (allInput[i].value == "") {
              allInput[i].className = "userName error";
              allInput[i].nextElementSibling.innerHTML = "此项必填！";
              allInput[i].nextElementSibling.className = "default error";
            }
          }
        };
      };
    </script>
  </body>
</html>
